<template>
  <!--用户详情 -->
  <div class="system-sysOperLog-detail">
    <el-drawer v-model="isShowDialog" size="50%" direction="ltr">
      <template #header>
        <h4>用户详情</h4>
      </template>
      <el-form ref="formRef" :model="formData" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="用户 Id：">{{ formData.userId }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账户名称：">{{ formData.userName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户昵称：">{{ formData.nickName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门 Id：">{{ formData.deptId }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门名称：">{{ formData.deptName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户邮箱：">{{ formData.email }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码：">{{ formData.phone }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户角色：">
                 <el-tag v-for="tag in formData.roleNames" :key="tag" class="tag-item" type="primary">
                  {{ tag }}
                </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户性别：">{{ formData.sex == 1 ? '男' : formData.sex == 2 ? '女' : '未知' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人员：">{{ formData.createBy }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间：">{{ formData.createTimeTxt }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户头像：">
              <el-avatar v-if="formData.active" :size="50" :src="formData.active" />
                <div v-else>未设置</div></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新人员：">{{ formData.updateBy }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="更新时间：">{{ formData.updateTimeTxt }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户状态：">{{ formData.status }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注：">{{ formData.remark }}</el-form-item>
          </el-col>
          
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
import {getUserApi} from '@/api/auth/user'
import { formatDateTime} from '@/utils'
export default defineComponent({
  name:"userDetail",
  components:{
  },
  props:{
    requestMethodOptions:{
      type:Array,
      default:()=>[]
    },
  },
  setup(props,{emit}) {
    const {proxy} = <any>getCurrentInstance()
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
    const state = reactive({
      loading:false,
      isShowDialog: false,
      formData: {
        userId:null,
        userName:'',
        nickName:'',
        deptId:'',
        deptName:'',
        email:'',
        phone:'',
        sex:null,
        createBy:'',
        createTime:'',
        createTimeTxt:'',
        active:'',
        updateBy:'',
        updateTime:'',
        updateTimeTxt:'',
        status:'',
        remark:'',
        roleNames:[]
      },
    });
    // 打开弹窗
    const openDialog = (row) => {
      resetForm();
      if(row) {
        getUserApi({id:row}).then((res:any)=>{
          state.formData=res.data
          state.formData.createTimeTxt=formatDateTime(state.formData.createTime)
          state.formData.updateTimeTxt=formatDateTime(state.formData.updateTime)
        })
      }
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const resetForm = ()=>{
      state.formData = {
        userId:null,
        userName:'',
        nickName:'',
        deptId:'',
        deptName:'',
        email:'',
        phone:'',
        sex:null,
        createBy:'',
        createTime:'',
        createTimeTxt:'',
        active:'',
        updateBy:'',
        updateTime:'',
        updateTimeTxt:'',
        status:'',
        remark:'',
        roleNames:[]
      }
    };
    return {
      proxy,
      openDialog,
      closeDialog,
      onCancel,
      menuRef,
      formRef,
      ...toRefs(state),
    };
  }
})
</script>
<style scoped>
</style>
